<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <canvas width="600" height="600"></canvas>
  <script src="/js/mesh.js"></script>
  <script>
    const {Figure2D, Mesh2D, Renderer} = meshjs;

    const canvas = document.querySelector('canvas');

    const figure = new Figure2D();
    // figure.addPath('M100 100C0 0 0 0 0 0 67.90 66.047 67.904 66.047 67.904 66.047 100 100 100 100 100 100');
    // figure.rect(100, 100, 200, 200);
    // figure.ellipse(0, 0, 5, 10, 0, Math.PI, 1);
    figure.arc(0, 0, 5, 0, Math.PI * 2);
    // figure.moveTo(300, 250);
    // figure.arcTo(50, 50, 0, 1, 1, 300, 180);

    const mesh1 = new Mesh2D(figure);

    mesh1.setFill({
      color: [1, 0, 0, 0.5],
    });

    // mesh1.setStroke({
    //   thickness: 2,
    //   color: [1, 0, 0, 1],
    //   // lineDash: [5, 15, 5],
    //   // lineDashOffset: 10,
    // });
    
    mesh1.translate(200, 200);
    mesh1.scale(20);

    const renderer = new Renderer(canvas, {
      // contextType: '2d',
    });

    renderer.drawMeshes([mesh1]);
  </script>
</body>
</html>